<template>
  <div class="right-jiaocan">
    <div class="tab-box">
      <TabComponent :sxList="state.sxList" @change="selectNameChange" />
    </div>
    <div class="select-box">
      <el-select v-model="state.selectValue" placeholder="请选择">
        <el-option v-for="item in state.options" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </div>
    <div class="content-box">
      <div class="content-item" v-for="item in 10" :key="item">
        <div class="circle-active"></div>
        <img class="icon" src="@/assets/ai/ppt.svg" alt="" />
        <div class="title">Unit1</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import TabComponent from '../tabs/tabComponent.vue';

const state = reactive({
  sxList: [
    { name: '数字教参', code: '1' },
    { name: '我的资源', code: '2' },
  ],
  // 筛选条件
  selectValue: '',
  options: [
    { value: '1', label: 'Unit1' },
    { value: '2', label: 'Unit2' },
    { value: '3', label: 'Unit3' },
    { value: '4', label: 'Unit4' },
    { value: '5', label: 'Unit5' },
    { value: '6', label: 'Unit6' },
  ],
});

const selectNameChange = (item: any) => {
  console.log('切换', item);
};
</script>
<style lang="scss" scoped>
.right-jiaocan {
  padding: 16px;
  height: calc(100% - 40px);
  background: rgba(255, 133, 0, 0.05);
  border-radius: 8px;
  width: 316px;
  box-sizing: border-box;
  margin: 20px 0;
  user-select: none;
  .tab-box {
    margin: 4px;
  }
  .select-box {
    margin: 16px 0;
  }
  .content-box {
    .content-item {
      width: 100%;
      height: 40px;
      background: #ffffff;
      border-radius: 8px;
      border: 1px solid #eeeeee;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      cursor: pointer;
      .circle {
        width: 16px;
        height: 16px;
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 15px;
        margin: 0 12px 0 10px;
      }
      .circle-active {
        width: 6px;
        height: 6px;
        border: 5px solid #ff8500;
        border-radius: 15px;
        margin: 0 12px 0 10px;
      }
      .icon {
        width: 20px;
        height: 20px;
        margin-right: 8px;
      }
    }
  }
}
</style>
